<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .team-info { margin-bottom: 20px; border: 1px solid #ddd; padding: 10px; }
  .team-name { font-size: 24px; font-weight: bold; }
  .players-list { list-style-type: none; padding: 0; }
  .players-list li { margin-bottom: 5px; }
    </style>
</head>
<body>
    

        <div class="team-info">
  <h2 class="team-name" id="teamName">未知球队</h2>
  <ul class="players-list" id="playersList"></ul>
  <p>最近的比赛结果：</p>
  <ul id="matchesList"></ul>
</div>
<div class="team-info">
  <h2 class="team-name" id="teamName">未知球队</h2>
  <ul class="players-list" id="playersList"></ul>
  <p>最近的比赛结果：</p>
  <ul id="matchesList"></ul>
</div>
<script>
    const teamData = {
    name: "皇家马德里",
    players: ["克里斯蒂亚诺·罗纳尔多", "加雷斯·贝尔", "卢卡·莫德里奇"],
    matches: [
      { opponent: "巴塞罗那", result: "3 - 1" },
      { opponent: "马德里竞技", result: "2 - 0" },
      { opponent: "瓦伦西亚", result: "1 - 1" }
    ]
  };

  // 当文档加载完毕时运行的函数
  document.addEventListener("DOMContentLoaded", function() {
    // 获取球队名称并显示
    document.getElementById("teamName").textContent = teamData.name;

    // 显示球员名单
    const playersListElement = document.getElementById("playersList");
    teamData.players.forEach(function(player) {
      const li = document.createElement("li");
      li.textContent = player;
      playersListElement.appendChild(li);
    });

    // 显示最近的比赛结果
    const matchesListElement = document.getElementById("matchesList");
    teamData.matches.forEach(function(match) {
      const li = document.createElement("li");
      li.textContent = `对阵 ${match.opponent}：${match.result}`;
      matchesListElement.appendChild(li);
    });
  });
</script>
</body>
</html>